<template>
	<view style="width: 100%">
		<view class="u-page">
			<u-loading-page :loading="loading" bg-color="#e8e8e8"></u-loading-page>

			<!-- <u-row customStyle="margin: 5px">
				<u-col span="10">
					<u-search style="z-index: 999" :disabled="true" bgColor="rgb(255 255 255)" placeholder="搜索"
						shape="round" @click="handle_SearchBox_click" :showAction="false" :animation="true"></u-search>
				</u-col>
				<u-col span="2">
					<u-button type="primary" icon="scan" @click="handle_Scan_Click" size="small" shape="circle"
						text="扫码">
					</u-button>
				</u-col>
			</u-row> -->

			<view class="top" style="background-color: transparent;">
				<u-row customStyle="margin: 5px" class="search">
					<u-col span="11">
						<u-search style="z-index: 999" :disabled="true" bgColor="rgb(255 255 255)" placeholder="搜索"
							shape="round" @click="handle_SearchBox_click" :showAction="false" :animation="true"></u-search>
					</u-col>
				</u-row>
				<view class="userInfoCreate">
					<u-row customStyle="margin: 10px" style="right:60% ;" >
						<u-col span="2" customStyle="padding-top: 1%; position: relative; right: 100%;">
							<u-button type="primary" icon="scan" @click="handle_Scan_Click" size="small" shape="circle"
								text="扫码">
							</u-button>
						</u-col>
					</u-row>
				</view>
			</view>

			<u-popup :show="show" @close="close" @open="open">
				<view style="width: 93%; align-self: center">
					<u--form labelWidth="auto" labelPosition="left" :model="queryParams" :rules="rules" ref="form1">
						<u-form-item label="申请人姓名" prop="applyName" borderBottom ref="item1">
							<u--input inputAlign="center" shape="square" border="none" v-model="queryParams.elderName">
							</u--input>
						</u-form-item>
						<u-form-item label="申请人身份证号码" prop="applyIdno" borderBottom ref="item1">
							<u--input inputAlign="center" shape="square" border="none" v-model="queryParams.elderIdno">
							</u--input>
						</u-form-item>
					</u--form>
					<u-row customStyle="margin:10px">
						<u-col span="12">
							<u-button class="custom-style" type="primary" size="small" @click="handel_search_click">搜索
							</u-button>
						</u-col>
					</u-row>
					<u-row customStyle="margin:10px">
						<u-col span="12">
							<u-button class="custom-style" type="primary" size="small" @click="handel_reset_click">重置
							</u-button>
						</u-col>
					</u-row>
				</view>
			</u-popup>
			<u-row customStyle="margin-bottom: 10px ">
				<u-col span="12">
					<u-empty v-if="DataList.length == 0" mode="list"></u-empty>
					<u-cell-group customStyle="background-color: white;" v-else>
						<u-cell v-for="(item, index) in DataList" :key="item.id" size="large" isLink clickable
							:title="item.elderName" :label="item.endTime" :value="item.status" :name="item.id"
							@click="handel_cell_click">
						</u-cell>
					</u-cell-group>
					<uni-load-more :status="status" :contentText="loadText" @clickLoadMore="MyonLoad" />
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	//APP页面：改造施工申请人,
	//数据库表：reform_application
	//1.获取老人信息列表，下拉继续加载
	//2.提供条件搜索选项
	//3.点击单个老人信息跳转到老人详情
	//4.新增录入老人信息
	import {
		transformPostBody,
		transformRequestURL
	} from "@/utils/requestParams.js";

	import {
		listSlhgzresqjl,
		getSlhgzresqjl,
		delSlhgzresqjl,
		addSlhgzresqjl,
		updateSlhgzresqjl,
	} from "@/api/elder/serviceApply.js";

	import {
		listSlhgzsbwcqk,
		getSlhgzsbwcqk,
		delSlhgzsbwcqk,
		addSlhgzsbwcqk,
		updateSlhgzsbwcqk,
	} from "@/api/elder/serviceApply_GZSG.js";

	import {
		QueryRTInfoList,
		addRTInfo,
		updateRTInfo,
		getRTInfo,
		delRTInfo,
		QueryRTInfoHistory,
	} from "@/api/elder/RTInfo.js";

	export default {
		name: "index",
		components: {},
		data() {
			return {
				DataList: [],
				total: 0, //条目总数，用户加载更多
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					searchValue: null,
					createBy: null,
					createTime: null,
					updateBy: null,
					updateTime: null,
					remark: null,
					params: {},
					id: null,
					taskId: null,
					taskTypeCode: null,
					taskTypeName: '家庭养老服务',
					begName: null,
					begTime: null,
					serverType: null,
					serverId: null,
					serverName: null,
					elderId: null,
					elderName: null,
					elderIdno: null,
					taskProvince: null,
					taskCity: null,
					taskDistrict: null,
					taskTown: null,
					taskVillage: null,
					taskStreet: null,
					taskRegisterAdd: null,
					taskLongitude: null,
					taskLatitude: null,
					planStartTime: null,
					planEndTime: null,
					startTime: null,
					endTime: null,
					status: null,
					taskDetail: null,
					isSelfSign: null,
					elderSign: null,
					approveName: null,
					approveResult: null,
					approveOpinion: null,
					star: null,
					appraise: null,
					realLongitude: null,
					realLatitude: null,
					attribute1: null,
					attribute2: null,
					attribute3: null,
					attribute4: null,
					attribute5: null,
					attribute6: null,
					attribute7: null,
					attribute8: null,
					attribute9: null,
					attribute10: null,
					attribute11: null,
					attribute12: null,
					attribute13: null,
					attribute14: null,
					attribute15: null,
					attribute16: null,
					attribute17: null,
					attribute18: null,
					attribute19: null,
					attribute20: null,
					attribute21: null,
					attribute22: null,
					attribute23: null,
					attribute24: null,
					attribute25: null,
					attribute26: null,
					attribute27: null,
					attribute28: null,
					attribute29: null,
					attribute30: null,
					attribute31: null,
					attribute32: null,
					defaultCommision: null,
					realCommision: null,
					commisionPay: null,
					prodToprice: null,
					prodRealpay: null,
					prodPay: null,
				},
				rules: {},
				loading: false, //加载中提示框显示
				show: false, //搜索框显示
				finished: false, //加载更多完结
				// status: "more", // 显示底部提示
				loadText: {
					contentdown: "点击加载更多",
					contentrefresh: "正在加载",
					contentnomore: "没有更多数据了",
				},
			};
		},
		watch: {},
		computed: {
			status() {
				if (this.DataList.length < this.total) {
					return "more";
				} else {
					this.finished = true;
					return "nomore";
				}
			},
		},
		onShow() {
			this.finished = false; //重置搜索完结
			this.queryParams.pageNum = 1; //重置搜索页
			this.DataList = []; //清空原结果集
			this.getList();
		},
		methods: {
			//条件搜索框
			handle_SearchBox_click() {
				this.show = true;
			},
			open() {},
			close() {
				this.show = false;
			},
			GetAddress(item) {
				const addressFields = [
					"taskProvince",
					"taskCity",
					"taskDistrict",
					"taskTown",
					"taskVillage",
					"taskStreet",
					"taskRegisterAdd",
				];
				const result = addressFields
					.filter((field) => item[field])
					.map((field) => item[field])
					.join("");
				return result;
			},
			MyonLoad(e) {
				this.fetch();
				this.finished = true;
				e.detail = {
					status: "loading",
				};
				return e;
			},
			//条件搜索按钮点击
			handel_search_click() {
				this.finished = false; //重置搜索完结
				this.queryParams.pageNum = 1; //重置搜索页
				this.DataList = []; //清空原结果集
				this.getList();
				this.show = false; //关闭搜索框
			},
			//条件重置按钮点击
			//taskTypeName按照this.Mode转化，'GZSG'对应'设备安装';'SMFW'对应'家庭养老服务'
			handel_reset_click() {
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
					taskTypeName: '家庭养老服务',
					...Object.fromEntries(Object.keys(this.queryParams).map((key) => [key, null])),
				};
				this.handel_search_click();
			},
			//跳转新增页
			handel_plus_click() {
				this.$tab.navigateTo("/pages/ShangMenFuWu/add");
			},
			//跳转改造施工明细页
			handel_cell_click(item) {
				console.log("item", item);
				this.$tab.navigateTo("/pages/ShangMenFuWu/SMFW/index?id=" + item.name);
			},
			//扫码并跳转到老人项目页面-筛选
			handle_Scan_Click() {
				uni.scanCode({
					success: (res) => {
						console.log(res.result);
						this.queryParams.elderId = res.result;
						this.getList();
					},
					fail: function(res) {
						uni.showToast({
							icon: "none",
							title: "扫码失败，请检查设备或条码是否正常",
							duration: 5000,
						});
					},
				});
			},
			//加载更多合并结果
			fetch() {
				this.queryParams.pageNum = this.queryParams.pageNum + 1; //加载下一页
				listSlhgzresqjl(this.queryParams).then((response) => {
					if (response.code == 200) {
						this.DataList = this.DataList.concat(
							response.rows.filter((item) => !this.DataList.some((i) => i.id === item.id))
						);
						this.total = response.total;
					}
				});
			},
			getList() {
				this.loading = true;
				listSlhgzresqjl(this.queryParams).then((response) => {
					console.log("listSlhgzresqjl 上门服务", response);
					if (response.code == 200) {
						this.DataList = response.rows;
						this.total = response.total;
					}
					this.loading = false;
				});

			},
		},
	};
</script>

<style lang="scss" scoped>
@import "../../yangLaoAppStyle.scss";
	.demo-uni-row {
		margin-bottom: 10px;
		/* QQ、字节小程序文档写有 :host，但实测不生效 */
		/* 百度小程序没有 :host，需要设置block */
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}

	/* 支付宝小程序没有 demo-uni-row 层级 */
	/* 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级 */
	/* #ifdef MP-ALIPAY || MP-WEIXIN */
	/deep/ .uni-row {
		margin-bottom: 10px;
	}

	/* #endif */

	.demo-uni-col {
		height: 36px;
		border-radius: 4px;
	}

	.mypage-title {
		font-size: 20px;
		font-weight: 600;
		align-self: center;
	}

	.wrap {
		padding: 12px;
	}

	.demo-layout {
		height: 25px;
		border-radius: 4px;
	}

	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}

	.custom-style {
		width: 90%;
		font-weight: bolder;
		font-size: 15px;
	}
</style>